$default-bg-color: #9215F2;
$form-bg-color: #B35EF3;
$header-lighten-color: #D593FF;
$header-darken-color:#8F19EF;
$border: 1px solid #000000;

@mixin clearfix
{
	&:after
	{
		display:block;
		content:"";
		height:0;
		clear:both;
	}
}

@mixin linear-gradient($from-color,$to-color,$from-position:0%,$to-position:100%)
{
	background: $from-color;
	background: -moz-linear-gradient(top,  $from-color $from-position, $to-color $to-position);
	background: -webkit-gradient(linear, left top, left bottom, color-stop($from-position,$from-color), color-stop($to-position,$to-color));
	background: -webkit-linear-gradient(top,  $from-color $from-position,$to-color $to-position);
	background: -o-linear-gradient(top,  $from-color $from-position,$to-color $to-position);
	background: -ms-linear-gradient(top,  $from-color $from-position,$to-color $to-position);
	background: linear-gradient(to bottom,  $from-color $from-position,$to-color $to-position);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from-color', endColorstr='$to-color',GradientType=0 );
	background-repeat:no-repeat;
}

body,header,section,nav,aside,footer,ul,li,p,article,h1 {
	padding:0;
	margin:0;
}

body
{
    font: 14px normal Arial;
	@include linear-gradient($header-lighten-color,$header-darken-color,0%,15%);
	margin:0;
	padding:0;
	color:white;
	background-color: $default-bg-color;
	header{
		padding-bottom:5px;
		div{
			&#logo-container
			{
				float:left;
			}
			&#header-container
			{
				padding:10px 0 0 25px;
				@include clearfix;
			}
			&#reg-form-container
			{
				float:right;
				margin: 20px 80px 0 0;
				label
				{
					margin:0 10px 0 0;
				}
				input
				{
					margin:5px;
					background-color: $form-bg-color;
					border:1px solid #603382;
					border-radius: 10px;
					width:140px;
					height:17px;
				}
				button
				{
					background-color:$form-bg-color;
					color:white;
					padding: 5px 10px;
					border-top: 2px solid lighten(#603382,50%);
					border-left: 2px solid lighten(#603382,50%);
					border-right: 2px solid #603382;
					border-bottom: 2px solid #603382;
					border-radius:10px;
					font-weight:bold;
					&:active /* on click */
					{
						background-color:darken($form-bg-color,30%);
						border-right: 2px solid lighten(#603382,50%);
						border-bottom: 2px solid lighten(#603382,50%);
						border-left: 2px solid #603382;
						border-top: 2px solid #603382;
					}
				}
			}
		}
		nav
		{
			padding:15px 35px 30px 35px;
			ul
			{
				width: 80%;
				list-style-type:none;
				&#main-nav-list
				{
					border: 2px solid black;
					border-radius: 20px;
					&>li
					{
						display:inline-block;
						padding:10px 15px 10px 15px;
						a
						{
							color:white;
							text-decoration:none;
							font-size:1.3em;
						}
						&:hover
						{
							cursor:pointer;
							& > a{
								text-decoration:underline;
								color:#A09AA8;
							}
							ul
							{
								display:block;
								position:absolute;
							}
						}
						ul
						{
							width:280px;
							background-color: lighten($default-bg-color,15%);
							display:none;
							li{
								margin:5px 10px 5px 10px;
								padding:5px 10px 5px 10px;
								border-bottom:$border;
								&:last-of-type
								{
									border:none;
								}
								&:hover
								{
									a
									{			
										text-decoration:underline;
										color:#A8A8A8;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	section
	{
		float:left;
		width:74%;
		padding:15px;
		article{
			border: $border;
			border-radius: 20px;
			padding:25px 30px 50px 25px;
			margin:0 0 30px 0;
			h1
			{
				font-size:1.4em;
			}
			footer
			{
				float:right;
				padding-top:5px;
				font-size: 16px;
				a
				{
					color:#CCA3F7;
					text-decoration:none;
					&:hover
					{
						text-decoration:underline;
					}
				}
			}
		}
	}
	aside
	{
		float:right;
		width: 20%;
		padding: 25px 40px 0 0;
		ul
		{
			list-style-type:none;
		}
		& > ul
		{
			& > li
			{
				border: $border;
				border-radius:10px;
				padding: 5px 20px 20px 20px;
				margin:15px 0;
				h2
				{
					font-size:1.2em;
				}
				a
				{
					color:#AAAAAA;
					text-decoration:none;
					&:hover
					{
						text-decoration:underline;
					}
				}
				li
				{
					background-image:url('images/li-dot.png');
					background-repeat: no-repeat;
					background-position: 0 center;
					padding-left: 30px;
				}
			}
		}
	}
	footer
	{
		clear:both;
		text-align:center;
		font-size:1.4em;
		font-weight:bold;
		padding-bottom:15px;;
	}
}